<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" :style="type == 2 ? 'width:100%;' : ''"></div>
    <div class="btn_box" v-if="type == 1">
      <h2 class="topTitle">云台控制</h2>

      <el-button
        v-for="(item, index) in btnList"
        :key="index"
        class="btn"
        round
        :icon="item.icon"
        @click="directionControl(item,index)"
        :disabled="item.disabled"
        >{{ item.name }}</el-button
      >
      
    </div>
  </div>
</template>
<script>
import XDVideo from "./index.js";
import { ptzStop } from "@/api/api";
export default {
  name: "HelloWorld",
  props: ["url", "accessToken", "type"],
  data() {
    return {
      name: "2",
      deviceSerial: "",
      channelNo: "",
      num: null,
      times: null,
      disabled: false,
      btnList: [
        {
          name: "左上",
          speed: 0,
          code: 4,
          icon: "el-icon-top-left",
          disabled: false,
        },
        { name: "上", speed: 0, code: 0, icon: "el-icon-top", disabled: false },
        {
          name: "右上",
          speed: 0,
          code: 6,
          icon: "el-icon-top-right",
          disabled: false,
        },
        {
          name: "左",
          speed: 0,
          code: 2,
          icon: "el-icon-back",
          disabled: false,
        },
        {
          name: "停止",
          speed: 0,
          code: null,
          icon: "",
          disabled: false,
        },
        {
          name: "右",
          speed: 0,
          code: 3,
          icon: "el-icon-right",
          disabled: false,
        },
        {
          name: "左下",
          speed: 0,
          code: 5,
          icon: "el-icon-bottom-left",
          disabled: false,
        },
        {
          name: "下",
          speed: 0,
          code: 1,
          icon: "el-icon-bottom",
          disabled: false,
        },
        {
          name: "右下",
          speed: 0,
          code: 7,
          icon: "el-icon-bottom-right",
          disabled: false,
        },
        {
          name: "近焦距",
          speed: 0,
          code: 10,
          icon: "el-icon-view",
          disabled: false,
        },
        {
          name: "远焦距",
          speed: 0,
          code: 11,
          icon: "el-icon-view",
          disabled: false,
        },
        {
          name: "放大",
          speed: 0,
          code: 8,
          icon: "el-icon-zoom-in",
          disabled: false,
        },
        {
          name: "缩小",
          speed: 0,
          code: 9,
          icon: "el-icon-zoom-out",
          disabled: false,
        },
        { name: "慢速", speed: 0, icon: null, disabled: false },
        { name: "匀速", speed: 1, icon: null, disabled: false },
        { name: "快速", speed: 2, icon: null, disabled: false },
      ],
    };
  },

  mounted() {
    var player = new XDVideo.EZUIKitPlayer({
      autoplay: true,
      id: "video-container",
      accessToken: this.accessToken,
      url: this.url,
      template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      // 视频上方头部控件
      //   header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
      //plugin: ['talk'],                       // 加载插件，talk-对讲
      // 视频下方底部控件
      //   footer: ["fullScreen"],//["talk", "broadcast", , "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
      // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
      // openSoundCallBack: data => console.log("开启声音回调", data),
      // closeSoundCallBack: data => console.log("关闭声音回调", data),
      // startSaveCallBack: data => console.log("开始录像回调", data),
      // stopSaveCallBack: data => console.log("录像回调", data),
      // capturePictureCallBack: data => console.log("截图成功回调", data),
      // fullScreenCallBack: data => console.log("全屏回调", data),
      // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
    });

    // setTimeout(()=>{
    //   player.stop(); // 方法调用示例，10秒后关闭视频
    // },10000)
    // console.log(player, "player");
    this.deviceSerial = player.opt.deviceSerial;
    this.channelNo = player.opt.channelNo;
    //  console.log(player);
    // console.log(this.url,'this.deviceSerial');
  },
  methods: {
    //  摄像头移动及速度
    async directionControl(e,idx) {
      this.btnList[idx].disabled = true
      e.name == "停止" ? this.stopTurn() : (this.num = e.code);
      const { data } = await ptzStop({
        accessToken: this.accessToken,
        speed: e.speed, //旋转速度
        direction: this.num, //方向
        channelNo: this.channelNo, // 通道号
        deviceSerial: this.deviceSerial, //序列号
        type: 1,
      });

      let res = JSON.parse(data);
       
      if (res.code !== "200") {
        this.$message(res.msg);
      }
      this.times = setTimeout(() => {
        this.btnList[idx].disabled = false
        this.stopTurn();
      }, 2000);
    },
    // 摄像头停止
    async stopTurn() {
      const { data } = await ptzStop({
        accessToken: this.accessToken,
        channelNo: this.channelNo, // 通道号
        deviceSerial: this.deviceSerial, //序列号
        type: 2,
      });
      let res = JSON.parse(data);
      if (res.code !== "200") {
        this.$message(res.msg);
      }
    },
  },
  destroyed() {
    if (this.times) {
      clearTimeout(this.times);
    }
  },
};
</script>
<style lang="scss" scope>
.hello-ezuikit-js {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  // align-items: center;
}
#video-container {
  width: 70%;
  height: 100%;
  #EZUIKitPlayer-video-container {
    width: 100%;
    height: 550px;
  }
}
.btn_box {
  display: flex;
  position: absolute;
  right: 0;
  top: 50px;
  width: 30%;
  flex-wrap: wrap;
  .topTitle {
    position: absolute;
    top: -55px;
    color: red;
    left: 10px;
  }
  .btn {
    width: 30%;
    height: 70px;
    margin: 0 auto;
    margin-bottom: 5px;
    font-size: 18px;
  }
}
</style>
